<template>
    <div style="height: 100%; position: relative">
      <el-drawer
        :title="title"
        :visible.sync="show_dialog"
        direction="rtl"
        size="80%"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <div class="demo-drawer__content" ref="content">
          <el-form
            :model="form"
            :rules="rules"
            v-if="show_dialog"
            ref="editDrawer"
          >
            <el-form-item
              label="商家名称:"
              :label-width="formLabelWidth"
              prop="MerchantName"
            >
              <el-select
                v-model="form.store_name"
                filterable
                placeholder="请选择"
                @change="selectChange($event)"
              >
                <el-option
                  v-for="item in storesList"
                  :key="item.store_id"
                  :label="item.store_name"
                  :value="`${item.store_id},${item.store_name}`"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="预警号码:"
              :label-width="formLabelWidth"
              prop="mobile"
            >
              <el-input v-model="form.mobile"></el-input>
            </el-form-item>
            <el-form-item label="备注:" :label-width="formLabelWidth" prop="note">
              <el-input v-model="form.note"></el-input>
            </el-form-item>
            <!-- <el-form-item
              label="状态:"
              prop="contract_status"
              :label-width="formLabelWidth"
            >
              <el-switch
                v-if="form.contract_status === 'Executing'"
                disabled
                v-model="form.contract_status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="Executing"
                inactive-value="Close"
                active-text="执行中"
                inactive-text="关闭"
              ></el-switch>
              <el-switch
                v-else
                v-model="form.contract_status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="Open"
                inactive-value="Close"
                active-text="开启"
                inactive-text="关闭"
              ></el-switch>
            </el-form-item> -->
          </el-form>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button
            type="primary"
            @click="handleClose"
            :loading="loading"
            v-show="type !== 'show'"
            >{{ loading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </el-drawer>
    </div>
  </template>
  <script>
  import { dateFormatter } from "@/common/js/util";
  export default {
    props: ["dialog"],
    data() {
      var checkTime = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("请选择起止时间"));
        }
        setTimeout(() => {
          callback();
        }, 1000);
      };
      return {
        loading: false,
        formLabelWidth: "180px",
        show_dialog: false, //弹窗显示
        title: "新增",
        form: {
          store_id: "",
          store_name: "",
          mobile: "",
        //   purchase_amount: "",
        //   purchase_duration: "",
        //   surplus_duration: "",
        //   addTime: "",
          // purchase_time: "",
          // end_time: "",
          note: "",
        //   contract_status: "Close",
          // contract_status_name:''
        },
        rules: {
          store_name: [{ required: true, message: "商家不能为空" }],
        //   purchase_amount: [{ required: true, message: "购买数量不能为空" }],
        //   purchase_duration: [
        //     { required: true, message: "购买时长不能为空", trigger: "blur" },
        //   ],
        //   surplus_duration: [{ required: true, message: "剩余时长不能为空" }],
          // purchase_time: [
          //     { required: true, message: '购买数量不能为空' }
          // ],
          // end_time: [
          //     { required: true, message: '剩余数量不能为空' }
          // ],
        //   addTime: [{ required: true, validator: checkTime }],
          // mobile: [
          //     { required: true, message: '预警号码不能为空' }
          // ],
          // note: [
          //     { required: true, message: '' }
          // ],
        //   contract_status: [{ required: true }],
        },
        type: "",
        row: "",
        Services: "", //服务类型
        storesList: [],
      };
    },
    created() {
      this.default_data();
    },
    methods: {
      default_data() {
        //供应商
        this.getStores();
      },
      getStores() {
        this.$http
          .post("/admin/dataService/index.php?act=merchantSet&op=getStores")
          .then((res) => {
            if (res.code == 1) {
              this.storesList = res.data;
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      },
      show_dialog_fn(type, row) {
        this.type = type;
        this.show_dialog = true;
        if (type === "add") {
          this.form = {
            store_id: "",
            store_name: "",
            mobile: "",
            // purchase_amount: "",
            // purchase_duration: "",
            // surplus_duration: "",
            // addTime: "",
            note: "",
            // contract_status: "",
          };
        } else if (type === "edit") {
          this.title = "编辑";
          this.row = row;
          this.getItemDetail(row.id);
        }
      },
      cancelForm() {
        this.loading = false;
        this.show_dialog = false;
        clearTimeout(this.timer);
      },
      handleClose() {
        let {
          store_name,
          store_id,
          mobile,
          note,
        } = this.form;
        let findFn = (arr, key, value) => {
          return arr.find((item) => item[key] == value);
        };
        let data = {
          store_name,
          store_id,
          mobile,
          note,
        };
        this.$refs.editDrawer.validate((valid) => {
          if (valid) {
            if (this.type === "edit") {
              data.id = this.row.id;
              if (this.form.contract_status === "Executing") {
                data.contract_status = this.form.contract_status;
                data.contract_status_name = this.form.contract_status_name;
              }
              this.editItemDetail(data);
            } else if (this.type === "add") {
              this.addItemDetail(data);
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      getItemDetail(id) {
        this.$http
          .post(
            `/admin/dataService/index.php?act=qualityIntelligent&op=getContractById`,
            { id }
          )
          .then((res) => {
            if (res.code != 1) {
              this.$message.warning(res.msg);
              this.show_dialog = false;
              return;
            }
 
            this.form = res.data;
          })
          .catch((err) => {
            this._message("error", err);
          });
      },
      addItemDetail(data) {
        this.$http
          .post(
            `/admin/dataService/index.php?act=qualityIntelligentNew&op=contractAdd`,
            data
          )
          .then((res) => {
            if (res && res.code == 1) {
              this.show_dialog = false;
              this.$parent.getListData();
              this.$message.success(res.msg);
            } else {
              this.$message.warning(res.msg);
            }
          })
          .catch((err) => {
            this._message("error", err);
          });
      },
      editItemDetail(data) {
        this.$http
          .post(
            `/admin/dataService/index.php?act=qualityIntelligent&op=alterContract`,
            data
          )
          .then((res) => {
            if (res.code == 1) {
              this.show_dialog = false;
              this.$message.success(res.msg);
              this.$parent.getListData();
            } else {
              this.$message.warning(res.msg);
            }
          })
          .catch((err) => {
            this._message("error", err);
          });
      },
      selectChange(val) {
        let [value, label] = val.split(",");
        console.log(val);
        this.form.store_name = label;
        this.form.store_id = value;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .el-form {
    // width: 560px;
    padding-left: 10px;
  }
  
  .el-select /deep/.el-input {
    width: 360px;
  }
  .plantTable /deep/.el-input {
    width: auto;
  }
  form /deep/.el-input {
    width: 360px;
  }
  
  .demo-drawer__content {
    position: absolute;
    top: 0;
    bottom: 60px;
    width: 100%;
    overflow-y: auto;
  }
  
  /deep/.el-drawer__body {
    position: absolute;
    top: 77px;
    bottom: 0;
    width: 100%;
    overflow: auto;
    padding-bottom: 60px;
  }
  
  .demo-drawer__footer {
    position: absolute;
    bottom: 10px;
    left: 20px;
  }
  
  .avatar-uploader /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  
  .avatar-uploader /deep/.el-upload:hover {
    border-color: #409eff;
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .row_line {
    border-bottom: 1px dashed #d7d8dc;
  }
  .goodsInfo {
    display: flex;
    align-items: center;
  }
  </style>
  